<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="user-scalable=0">-->
    <title>12354山卡拉火车网-车票查询</title>
    <!--    城市选项框-->
    <link rel="stylesheet" th:href="@{/css/style.css}" media="all">

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}"  media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/moment-with-locales.js}"></script>
</head>
<body>

<div th:replace="components/public/header :: html"></div>

<!-- 添加 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" >请选择到达城市</h4>
                <!--                                        id="myModalLabel"-->
            </div>
            <div class="modal-body">
                <fieldset>
                    <div id="data-wrap">
                        <ul id="data-order">
                            <li value='0'>热门</li>
                            <li value='1'>ABCD</li>
                            <li value='2'>EFGH</li>
                            <li value='3'>JKLM</li>
                            <li value='4'>NPQR</li>
                            <li value='5'>STWX</li>
                            <li value='6'>YZ</li>
                        </ul>
                        <div id="data-show"></div>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">确认目的地</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="container">
    <style>
        .form-label{
            color: #333;
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            list-style: none;
            line-height: 30px;
            box-sizing: border-box;
            font-weight: 400;
            margin-right: 10px;
        }
        .my-btn{
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
            width: 150px !important;
            display: inline-block;
            font-size: 14px;
            min-width: 80px;
            height: 34px;
            line-height: 20px;
            padding: 6px 10px;
            border: 1px solid #E6E6E6;
            border-radius: 4px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            outline: none;
            position: relative;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,color ease-in-out .15s,background ease-in-out .15s;
            background: #FF8000;
            color: #fff;
            border-color: #FF8000;

        }
    </style>
<!--    搜索框输入-->
    <div class="row">
        <form class="form-inline" action="/ticket/query" method="post">
            <div class="panel panel-default" style="margin-top: 20px;">
                <div class="panel-body">
                    <style>
                        .input-text {
                            font-size: 18px;
                        }
                    </style>
                    <div class="form-group ">
                        <label for="addr-show02" class="form-label input-text">出发地</label>
                        <input type="text" id="addr-show02" class="form-control"
                               name="departure_city" data-toggle="modal" data-target="#myModal" placeholder="请选择城市" style="width: 200px;height: 30px; margin-top: 10px">
                    </div>

                    <div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">请选择</h4>
                                </div>
                                <div class="modal-body">
                                    <!-- 在这里添加一些文本 -->
                                    <fieldset>
                                        <div id="addr-choice">
                                            <ul id="title-wrap">
                                                <li value="0">省份</li>
                                                <li value="1">城市</li>
                                                <li value="2">县区</li>
                                            </ul>
                                            <div id="show-panel">
                                                <ul id="addr-wrap">
                                                </ul>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary met2" data-dismiss="modal">确认地点</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                    <!-- 添加 -->
                    &nbsp;
                    <div class="form-group">
                        <label ><span class="glyphicon glyphicon-resize-horizontal" style="color: orange;font-size: 40px; margin-top: 5px;"></span></label>
                    </div>
                    &nbsp;
                    <div class="form-group ">
                        <label for="addr-show03" class="form-label input-text">到达地</label>
                        <input type="text" id="addr-show03" class="form-control"
                               name="arrival_city" data-toggle="modal" data-target="#myModal2" placeholder="请选择城市" style="width: 200px;height: 30px; margin-top: 10px">
                    </div>
                    &nbsp;
                    <div class="form-group ">
                        <label for="date" class="form-label input-text" >日期</label>
                        <div class='input-group date' id='datetimepicker1'>
                            <input id="date" type='text' class="form-control" name="departure_time" autocomplete="off"/>
                            <span class="input-group-addon" id="date_btn_01">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    <link rel="stylesheet" th:href="@{/css/bootstrap-datetimepicker.min.css}" media="all">
                    <script th:src="@{/js/bootstrap-datetimepicker.min.js}"></script>
                    <!--<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">-->
                    <!--<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>-->

                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker1').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn')
                            });
                            $('#datetimepicker2').datetimepicker({
                                format: 'YYYY-MM-DD hh:mm',
                                locale: moment.locale('zh-cn')
                            });
                        });
                    </script>
                    <a class="my-btn" id="search_btn" href="javascript:;" style="float: right; margin-top: 10px; text-decoration: none;">搜索</a>
                </div>
            </div>
        </form>

        <script>
            let preHtml = '<div class="ticket-result-titlist" >\n' +
                '                        <div class="ticket-number ">火车号</div>\n' +
                '                        <div class="ticket-time sort-departure ">出发时间<span class="btn-sort"><i class="sort-top active"></i><i class="sort-down"></i></span></div>\n' +
                '                        <div class="ticket-alltime sort-duration ">历程时间<span class="btn-sort"><i class="sort-top"></i><i class="sort-down"></i></span></div>\n' +
                '                        <div class="ticket-time sort-arrival ">到达时间<span class="btn-sort"><i class="sort-top"></i><i class="sort-down"></i></span></div>\n' +
                '                        <div class="ticket-price ">座位类型/价格</div>\n' +
                '                        <div class="ticket-btn "></div>\n' +
                '                    </div>';

            function searchTicket(count){
                let from = $('#addr-show02').val().trim();
                let to = $('#addr-show03').val();
                let date = $('#date').val();
                //从页面上获取地点, 还有日期
                if(userSelectOption){
                    //如果用户选择了条件
                    from = $('input[name="from_station"]:checked').val()
                    if(from==null) from = $('#addr-show02').val().trim();
                    to = $('input[name="to_station"]:checked').val()
                    if(to==null) to = $('#addr-show03').val()
                }


                if(from==null||to==null){
                    $('#showDiv').html(preHtml+showTip('请输入地址!'))
                    return;
                }

                if (date==null||date==="") {
                    $('#showDiv').html(preHtml+showTip('请输入出发时间!'))
                    return;
                }

                //显示票
                queryTicket(from, to, date, null, count);
            }

            $('#search_btn').click(function () {
                searchTicket(null)
            })

            function showTip(msg){
                return '<center>\n' +
                    '                    <h1 style="color: gray" >\n' +
                    '                        <span id = "tipH1">\n' +
                    msg +
                    '                        </span>\n' +
                    '                    </h1>\n' +
                    '                    </center>';
            }
        </script>
    </div>
<!--    条件选择跟详细车票-->
    <div class="row">
        <style>
            .ticket-filter-list{
                color: #333;
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                border: 0;
            }
            .filter-head {
                color: #333;
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                box-sizing: border-box;
                padding: 0;
                border: 0;
                line-height: 26px;
                font-size: 18px;
                margin: 8px 0 10px;
            }
            .filter-item {
                color: #333;
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                border: 0;
                min-height: 54px;
            }
            .filter-hd {
                color: #333;
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                box-sizing: border-box;
                margin: 0;
                border: 0;
                height: 40px;
                line-height: 20px;
                padding: 10px 0 0 8px;
                position: relative;
            }
            .filter-bd {
                color: #333;
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                border: 0;
            }
            .ul-type {
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                box-sizing: border-box;
                list-style: none;
                margin: 0;
                padding: 0;
                border: 0;
                color: #4C4C4C;
            }
            .key-item {
                -webkit-text-size-adjust: 100%;
                font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                font-size: 14px;
                color: #4C4C4C;
                box-sizing: border-box;
                list-style: none;
                padding: 0;
                border: 0;
                line-height: 30px;
                padding-left: 20px;
                margin: 5px 0;
            }
            .label-text-01 {
                margin-left: 6px;
                display: inline-block;
                -moz-user-select: none;
                -ms-user-select: none;
                -webkit-user-select: none;
                user-select: none;
            }

        </style>
<!--        条件选择的地方-->
        <div class="col-md-2">
            <div id="J-left-ticket-filter" class="ticket-side">

                <div class="ticket-filter-list">
                    <div class="filter-head">选择条件</div>
                    <div class="filter-item">
                        <div class="filter-hd">动车类型</div>
                        <div class="filter-bd">
                            <ul class="filter-key-list ul-type" id="trainNumShow">
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio" name="train_type" checked="checked" value="2"> 所有</label>
                                </li>
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio" name="train_type" value="1"> G/C/D</label>
                                </li>
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio" name="train_type" value="0"> 其他</label>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="filter-item">
                        <div class="filter-hd">出发站点</div>
                        <!--  -->
                        <div class="filter-bd">
                            <ul class="filter-key-list ul-type" id="fromStationShow">
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio"> 具体的站点1</label>
                                </li>
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio"> 具体的站点1</label>
                                </li>
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio"> 具体的站点1</label>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="filter-item">
                        <div class="filter-hd">到达站点</div>
                        <div class="filter-bd">
                            <ul class="filter-key-list ul-type" id="toStationShow">
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio"> 具体的站点1</label>
                                </li>
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio"> 具体的站点1</label>
                                </li>
                                <li class="key-item">
                                    <label class="label-text-01" ><input type="radio"> 具体的站点1</label>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="filter-item filter-item-last">
                        <div class="filter-hd">出发时间</div>
                        <div class="filter-bd">
                            <ul class="filter-key-list ul-type">
                                <li class="key-item">
                                    <select class="form-control" style="width: 122px;">
                                        <option>00:00-24:00</option>
                                        <option>00:00-06:00</option>
                                        <option>06:00-12:00</option>
                                        <option>12:00-18:00</option>
                                        <option>18:00-24:00</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <!--展示票的地方-->
        <div class="col-md-10">
            <style>
                .citys-item {
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    line-height: 30px;
                    font-size: 16px;
                    box-sizing: border-box;
                    font-weight: 700;
                }
                .search-citys{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    line-height: 30px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    font-size: 16px;
                    margin-right: 20px;
                }
                .ticket-result-titlist{
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    height: 40px;
                    line-height: 40px;
                    background: #F8F8F8;
                    color: #666;
                }
                .sort-duration{
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 40px;
                    color: #666;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    /* float: left; */
                    text-align: center;
                    width: 185px;
                }
                .ticket-number {
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 40px;
                    color: #666;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    padding-left: 20px;
                    width: 130px;
                    position: relative;
                }
                .ticket-alltime {
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 40px;
                    color: #666;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    min-height: 34px;
                    float: left;
                    width: 120px;
                    text-align: center;
                }
                .ticket-time {
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 40px;
                    color: #666;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    text-align: center;
                    width: 185px;
                }
                .ticket-price {
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 40px;
                    color: #666;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    width: 228px;
                    text-align: center;
                }

                .ticket-result-item{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    box-sizing: border-box;
                    margin: 0;
                    border: 0;
                    padding: 30px 0 20px 0;
                    line-height: 24px;
                }
                .ticket-item-info{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    width: 620px;
                }
                .ticket-item-buy{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    width: 328px;
                    position: relative;
                    /* margin-left: 55px; */
                }
                .ticket-number1{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    padding-left: 20px;
                    width: 130px;
                    position: relative;
                }
                .ticket-item-buy-item{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    margin-bottom: 12px;
                    height: 24px;
                }
                .ticket-price1{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    width: 228px;
                    text-align: center;
                    height: 24px;
                }
                .ticket-btn1{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    width: 100px;
                    text-align: center;
                }
                .ticket-price-seat{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    width: 68%;
                    text-align: right;
                    padding-right: 10px;
                    margin-top: 4px;
                    line-height: 16px;
                    height: 32px;
                    overflow: hidden;
                }
                .ticket-price-num{
                    color: #333;
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    float: left;
                    width: 32%;
                    text-align: left;
                    position: relative;
                }
                .text-price{
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    font-size: 14px;
                    line-height: 24px;
                    text-align: left;
                    box-sizing: border-box;
                    color: #FF8201 !important;
                }
                .left-num{
                    -webkit-text-size-adjust: 100%;
                    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
                    box-sizing: border-box;
                    margin: 0;
                    border: 0;
                    font-size: 12px;
                    padding: 1px 2px;
                    background-color: rgba(59,153,252,0.2);
                    color: #3B99FC;
                    line-height: 1;
                    position: absolute;
                    top: 21px;
                    min-width: 37px;
                    text-align: center;
                }




            </style>
            <div>
                <!--分页条-->
                <center>
                    <nav aria-label="Page navigation">
                        <ul class="pagination" id="paging">
                            <li class="disabled p" id="previous">
                                <a href="#" aria-label="Previous" >
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li id="next" class="n">
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </center>

            </div>
            <div class="panel panel-default" style="width: 104%;">
                <div class="panel-heading">
                    <div class="search-citys">
                        <span class="citys-item" id="showFrom">出发地</span>
                        <span class="glyphicon glyphicon-menu-right" style="font-size: 20px; color: orange;margin-top: 5px" ></span>
                        <span class="citys-item" id="showTo">到达地</span>
                    </div>
                </div>

                <style>
                    .blue-font{
                        font-size: 18px;
                        color: rgba(0, 68, 255, 0.747);
                    }
                    .time-font{
                        font-size: 18px;
                    }
                    .btn-primary{
                        background-color: #3B99FC;
                        border-color: #3B99FC;
                    }
                </style>
                <div class="panel-body" id="showDiv">
                    <!-- 列表标题 -->
                    <div class="ticket-result-titlist" >
                        <div class="ticket-number ">火车号</div>
                        <div class="ticket-time sort-departure ">出发时间<span class="btn-sort"><i class="sort-top active"></i><i class="sort-down"></i></span></div>
                        <div class="ticket-alltime sort-duration ">历程时间<span class="btn-sort"><i class="sort-top"></i><i class="sort-down"></i></span></div>
                        <div class="ticket-time sort-arrival ">到达时间<span class="btn-sort"><i class="sort-top"></i><i class="sort-down"></i></span></div>
                        <div class="ticket-price ">座位类型/价格</div>
                        <div class="ticket-btn "></div>
                    </div>
                    <center>
                        <h1 style="color: gray" >
                        <span id = "tipH1">
                        -- 请输入你要查询的车票 --
                        </span>
                        </h1>
                    </center>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- 城市js -->
<script src="/js/city.js"></script>
<script src="/js/city02.js"></script>
<script src="/js/method02.js"></script>
<script src="/js/method03.js"></script>

<script th:inline="javascript">

    /**
     * 将英文的座位类型变成中文
     */
    function translate(type) {
        switch (type) {
            case "highGradeSleeper":
                type = "高级卧铺";
                break;
            case "firstClassSleeper":
                type = "一等卧";
                break;
            case "secondClassSleeper":
                type = "二等卧";
                break;
            case "softSleeper":
                type = "软卧";
                break;
            case "hardSleeper":
                type = "硬卧";
                break;
            case "businessSeat":
                type = "商务座";
                break;
            case "firstClassSeat":
                type = "一等座";
                break;
            case "secondClassSeat":
                type = "二等座";
                break;
            case "softSeat":
                type = "软座";
                break;
            case "hardSeat":
                type = "硬座";
                break;
            case "noSeat":
                type = "无座";
                break;
        }
        return type;
    }

    /**
     * 这是展示车票种类的方法
     */
    function showType(seat) {
        let leftHtml = "";
        if(seat.numOfSeat==='200'){
            leftHtml="";
        }else {
            leftHtml+="                                        <div class=\"left-num\">\n仅" +
                    seat.numOfSeat+
                "张                                        </div>\n"
        }

        let html =
            "                            <div class=\"ticket-item-buy-item\">\n" +
            "                                <div class=\"ticket-price1\">\n" +
            "                                    <!-- 座位类型 -->\n" +
            "                                    <div class=\"ticket-price-seat\">\n" +
            translate(seat.type) +
            "                                    </div>\n" +
            "                                    <div class=\"ticket-price-num\">\n" +
        "                                            <span class=\"text-price\">\n￥" +
        seat.price +
        "                                            </span>\n" +
            leftHtml +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                                <!-- 按钮 -->\n" +
            "                                <div class=\"ticket-btn1\">\n" +
            "                                    <a id=\"J-booking-0-0\" class=\"btn btn-primary btn-sm ticketSubmit\" style=\"width:78px;\" href=\"/purchase/ticket/"
            + seat.seatNo+"\""+
            " background-color: #3B99FC;border-color: #3B99FC\">预订</a>\n" +
            "                                </div>\n" +
            "                            </div>\n";
        return html;
    }

    /**
     * 这是展示整个车票的方法
     */
    function showTicket(trainNum,from,to,startTime,endTime,duration,seatsList) {
        let typeHtml = "<div class=\"ticket-item-buy\" >\n";
        for(let i=0;i<seatsList.length;i++){
            typeHtml+=showType(seatsList[i]);
        }
        typeHtml+="                        </div>"

        let html = "<!-- 具体的数据 -->\n" +
            "                    <div class=\"ticket-result-item row\"  >\n" +
            "                        <div>\n" +
            "                            <div class=\"ticket-number blue-font\" style='font-size: 25px'>\n" +
            trainNum +
            "                            </div>\n" +
            "                            <div class=\"ticket-time\">\n" +
            "                                <div class=\"time-font\">\n" +
            startTime +
            "                                </div>\n" +
            "                                <div style='font-size: 20px'>\n" +
            from +
            "                                </div>\n" +
            "                            </div>\n" +
            "                            <div class=\"ticket-alltime\">" +
            "                              <div class='ticket-alltime-txt'>" +
            duration +
            "                               </div>"+
                "<span class='glyphicon glyphicon-arrow-right' style='font-size: 35px;color: orange'></span>"+
            "                            </div>\n" +
            "                            <div class=\"ticket-time\">\n" +
            "                                <div class=\"time-font\">\n" +
            endTime +
            "                                </div>\n" +
            "                                <div style='font-size: 20px'>\n" +
            to +
            "                                </div>\n" +
            "                            </div>\n" +
            "                        </div>\n" +
            typeHtml +
            "                    </div>\n" +
            "                    <hr>";

        return html;
    }

    /**
     * 这是展示条件的方法
     */
    function showCondition(data) {

        let fromStation = data.fromStation;
        $('#fromStationShow').html(showEach(fromStation, 'from_station'));

        let toStation = data.toStation;
        $('#toStationShow').html(showEach(toStation, 'to_station'));

    }

    /**
     * 将一个数组变为条件列
     */
    function showEach(arr, name) {
        let html = "";
        for(let i=0; i<arr.length; i++){
            html += "<li class=\"key-item\">\n" +
                    "    <label class=\"label-text-01\" ><input type=\"radio\" name='"+name+"' value='"+arr[i]+"'> \n" +
                    arr[i] +
                    "    </label>\n" +
                    "</li>";
        }
        return html;
    }
    //当单项框发生改变的时候, 就查询相应的车票
    $('.ticket-filter-list').on('click', 'input[type=radio]', function () {
        userSelectOption = true
        console.log($(this).attr('name')+" : "+$(this).val())

        let from = $('#addr-show02').val().trim()
        let to = $('#addr-show03').val()
        let date = $('#date').val()
        let high = $('input[name=train_type]:checked').val()

        //只变相应的位置
        switch ($(this).attr('name')) {
            case 'from_station':
                from = '省 '+$(this).val()+' 区'
                $('#addr-show02').val(from)
                break;
            case 'to_station':
                to = $(this).val()
                $('#addr-show03').val(to)
                break;
        }

        keyItem(from, to, date, high, null, 'precise')
    })
    //用户是否选择的条件查询
    let userSelectOption = false
    //出发地和目的地条件查询
    function keyItem(from, to, date, high, count, precise) {
        $.ajax({
            url: "/ticket/query",
            method: "POST",
            data: {from, to, date, high, count, precise},
            success: function (data) {
                let count = data.pageCount
                showPageCount(count)
                showTicketPage(data.data)
            }
        });
        //还要改变页面上的地址, 否则点击菜单会使用之前的
    }

    //展示票页面方法, data是车票数据
    function showTicketPage(data){
        if(data===""||data==null){
            if(!firstTime){
                $('#showDiv').html(preHtml+showTip('抱歉,该时间段没有相关列车!'));
            }
            firstTime = false;
            return;
        }

        let head = "<div class=\"ticket-result-titlist\" >\n" +
            "                        <div class=\"ticket-number \">火车号</div>\n" +
            "                        <div class=\"ticket-time sort-departure \">出发时间<span class=\"btn-sort\"><i class=\"sort-top active\"></i><i class=\"sort-down\"></i></span></div>\n" +
            "                        <div class=\"ticket-alltime sort-duration \">历程时间<span class=\"btn-sort\"><i class=\"sort-top\"></i><i class=\"sort-down\"></i></span></div>\n" +
            "                        <div class=\"ticket-time sort-arrival \">到达时间<span class=\"btn-sort\"><i class=\"sort-top\"></i><i class=\"sort-down\"></i></span></div>\n" +
            "                        <div class=\"ticket-price \">座位类型/价格</div>\n" +
            "                        <div class=\"ticket-btn \"></div>\n" +
            "                    </div>";

        let html = "";
        for(let i=0;i<data.length;i++){
            let ticket = data[i];
            let ticketHtml = showTicket(ticket.trainNum,ticket.from,ticket.to,ticket.startTime,ticket.endTime,ticket.duration,ticket.seatsList);
            html+=ticketHtml;
        }
        $('#showDiv').html(head + html);
    }
    //展示票页数
    function showPageCount(count){
        last = count //最后页数
        let html = '<li class="disabled p" id="previous">\n' +
            '         <a href="#top" aria-label="Previous" >\n' +
            '         <span aria-hidden="true">&laquo;</span>\n' +
            '         </a>\n' +
            '         </li>'
        for(let i=0;i<count;i++){
            let t = i + 1
            if(t===1)
                //首页激活状态
                html+='<li class="active"><a href="#">'+t+'</a></li>'
            else
                html+='<li><a href="#top">'+t+'</a></li>'
        }
        html+='<li id="next" class="n">\n' +
            '         <a href="#top" aria-label="Next">\n' +
            '         <span aria-hidden="true">&raquo;</span>\n' +
            '         </a>\n' +
            '         </li>'

        $('#paging').html(html)
    }
    let firstTime = true;



    //之前的地方, 只有当地方不相同的时候才会被刷新 记录条数和条件数
    let previousFrom
    let previousTo

    /**
     * 这是ajax展示票的方法
     */
    function queryTicket(from, to, date, only_high_speed, count){
        //需要变动的地方
        //出发地到达地显示在页面上
        $('#showFrom').html(from.split(' ')[1]);
        $('#showTo').html(to);
        //如果搜索的地方与之前的地方名, 不相同, 那么就刷新页数和条件页面
        if(previousFrom !== from || previousTo !== to){
            previousFrom = from
            previousTo = to
            $.ajax({
                url: "/ticket/query",
                method: "POST",
                data: {from, to, date, only_high_speed, count},
                success: function (data) {
                    let count = data.pageCount
                    showPageCount(count)
                    showTicketPage(data.data)
                }
            });
            //如果用户选择了条件查询, 那么就不要更新条件
            if(!userSelectOption){
                $.ajax({
                    url: "/ticket/queryCondition",
                    method: "POST",
                    data: {from,to,date,only_high_speed},
                    success: function (data) {
                        showCondition(data);
                    }
                });
            }
        }else {
            //否则只刷新数据
            $.ajax({
                url: "/ticket/query",
                method: "POST",
                data: {from, to, date, only_high_speed, count},
                success: function (data) {
                    showTicketPage(data.data)
                }
            });
        }

    }

    $(function () {
        let from = [[${from}]];
        $('#addr-show02').val(from);
        let to = [[${to}]];
        $('#addr-show03').val(to);
        let date = [[${date}]];
        $('#date').val(date);
        let highSpeed = [[${highSpeed}]];
        queryTicket(from,to,date,highSpeed);
    })

    //当用户重新选择目的地
    $('#addr-show02').click(function () {
        userSelectOption = false
    })
    $('#addr-show03').click(function () {
        userSelectOption = false
    })


    /**
     * 换页方法
     */
    function changePage(){
        //输入页数
        searchTicket(current)
    }

    //分页逻辑
    let first = 1
    let last = 5
    let current = 1//当前页数
    //分页
    $('#paging').on('click','li',function () {

        if($(this).hasClass('p')||$(this).hasClass('n'))
            return
        let count = $(this).text()
        let lis = $('#paging').children()
        //但页数不相同时候, 使用换页方法
        if(count!==current)
            changePage(current)

        for(let i=1;i<lis.length;i++){
            $(lis[i]).removeClass('active')
        }
        current = count
        $(lis[current]).addClass('active')
    })
    $('#paging').on('click', '#previous', function () {
        let lis = $('#paging').children()
        $('#next').removeClass('disabled')
        if(current>first){
            $(lis[current]).removeClass('active')
            $(lis[current-1]).addClass('active')
            current = current - 1
            if(first === current){
                //如果现在是第一页, 那么就禁止第一页
                $('#previous').addClass('disabled')
            }else if ($('#previous').hasClass('disabled')) {
                //如果现在不是第一页, 并且前一页的按钮是不可点击的状态, 那么就改为可以点击的状态
                $('#previous').removeClass('disabled')
            }
        }
        changePage(current)
    })

    $('#paging').on('click', '#next', function () {
        console.log(current)
        let lis = $('#paging').children()
        $('#previous').removeClass('disabled')
        if(current<last){
            $(lis[current]).removeClass('active')
            current = parseInt(current)
            current = current + 1
            $(lis[current]).addClass('active')

            if(last === current){
                //如果现在是第一页, 那么就禁止第一页
                $('#next').addClass('disabled')
            }else if ($('#next').hasClass('disabled')) {
                //如果现在不是第一页, 并且前一页的按钮是不可点击的状态, 那么就改为可以点击的状态
                $('#next').removeClass('disabled')
            }
        }
        changePage(current)
    })

</script>
</body>
</html>